/**
 * ShoppersDialog
 */
/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  上传数据
 * shoppers组件中  传递方法未PUT
 * */
 var Validator = require("../../../utils/validator/Validator");
 var CommonDialog = require("./CommonDialog");
 var React = require("react");
 var ShoppersDialog = React.createClass({
    mixins: [CommonDialog],
    getInitialProps: function (){
        return {
            data: {}
        }
    },
    getInitialState: function (){
        return {
            isValid: false,
            shoppers: {
                jd:{
                    url: "",
                    price: ""
                },
                tb:{
                    url: "",
                    price: ""
                },
                sn:{
                    url: "",
                    price: ""
                },
                tm:{
                    url: "",
                    price: ""
                }
            },
            sn: true,
            jd: true,
            tm: true,
            tb: true
        }
    },
    componentWillMount: function (){
        var data = this.props.data;
        if (!data) return false;

        data = $.extend(true, this.state.shoppers, data);

        this.setState({
            shoppers: data,
            isValid: this.checkAllValidate(data)
        });
    },
    checkAllValidate: function (data){
        var urls = {
            jd: data['jd'].url || '',
            tm: data['tm'].url || '',
            tb: data['tb'].url || '',
            sn: data['sn'].url || '',
        };

        if (!urls.jd && !urls.tm && !urls.tb && !urls.sn){
            return false;
        }

        var types = ["jd", "tm", "tb", "sn"];
        for (var i=0,l=types.length; i<l; i++){
            var type = types[i];

            var Rule = [
                {
                    validator: "url",
                    error: $._('Website error')
                }
            ];
            Rule.push({
                validator: type + "Url"
            });

            var validator = Validator();
            validator.addRule(urls[type], Rule);

            var errors = validator.execute();
            var param = {};
            if (errors){
                param[type] = false;
                this.setState(param);

                return false;
            } else {
                param[type] = true;
                this.setState(param);
            }
        }

        return true;
    },
    getRebuildShoppers: function (){
        var shoppers = this.state.shoppers,
            obj = {};

        for (var key in shoppers){
            var item = shoppers[key];
            if (item.url){
                if (item.url.trim().length){
                    obj[key] = item;
                }
            } else {
                obj[key] = {};
            }
        }
        return obj;
    },
    handleOnShopperChanged: function (type, e){
        var node = $(e.target), value = node.val();

        var shoppers = this.state.shoppers;
        shoppers[type] = {
            url: value
        };

        this.setState({
            shoppers: shoppers,
            isValid: this.checkAllValidate(shoppers)
        });
    },
    handleOnSubmit: function (){
        const saveRecognizeProperty = this.props.saveRecognizeProperty,
            data = this.getRebuildShoppers();
        saveRecognizeProperty({
            shoppers: data
        }, "PUT");

        this.handleOnCloseDialog();
    },
    render: function (){
        var isValid = this.state.isValid;
        var shoppers = this.state.shoppers;
        var jd = shoppers['jd'].url || '',
            tm = shoppers['tm'].url || '',
            tb = shoppers['tb'].url || '',
            sn = shoppers['sn'].url || '';
        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form shoppersDialog">
                    <div className="btg-modal-content">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>{$._('Shopping guide')}</label>
                            </div>
                            <div className="form-group tip">
         {$._('Paste website url')}<br />
                                {$._('if empty and not add')}
                            </div>
                            <div style={{display: ((!jd && !tm && !tb && !sn) ? "block" : "none")}} className="form-group error">
                                {$._('Please write one info')}
                            </div>
                            <div className="form-group">
                                <span>{$._("JD")}</span>
                                <input onChange={this.handleOnShopperChanged.bind(this, "jd")} value={shoppers.jd.url} name="jd" type="text" className="form-control" value={this.state.shoppers['jd'].url}/>
                                <div className='dialog-error-tip' style={{display:this.state.jd ? 'none': 'block'}}>{$._('Please enter a valid jd url')}</div>
                            </div>
                            <div className="form-group">
                                <span>{$._("Tmall")}</span>
                                <input onChange={this.handleOnShopperChanged.bind(this, "tm")} value={shoppers.tm.url} name="tm" type="text" className="form-control" />
                                <div className='dialog-error-tip' style={{display:this.state.tm ? 'none': 'block'}}>{$._('Please enter a valid tmall url')}</div>
                            </div>
                            <div className="form-group">
                                <span>{$._("Taobao")}</span>
                                <input onChange={this.handleOnShopperChanged.bind(this, "tb")} value={shoppers.tb.url} name="tb" type="text" className="form-control" />
                                <div className='dialog-error-tip' style={{display:this.state.tb ? 'none': 'block'}}>{$._('Please enter a valid taobao url')}</div>
                            </div>
                            <div className="form-group">
                                <span>{$._('Suning')}</span>
                                <input onChange={this.handleOnShopperChanged.bind(this, "sn")} value={shoppers.sn.url} name="sn" type="text" className="form-control" />
                                <div className='dialog-error-tip' style={{display:this.state.sn ? 'none': 'block'}}>{$._('Please enter a valid suning url')}</div>
                            </div>
                            <div className="form-group buttons">
                                <button onClick={this.handleOnSubmit} disabled={!isValid} type="button">{$._("Confirm")}</button>
                            </div>
                        </div>
                    </div>
                    <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
                </dialog>
            </div>
        )
    }
 });

 module.exports = ShoppersDialog;
